<template>
	<view class="theme-selector">
		<!-- 主题选项列表 -->
		<view class="theme-options">
			<view 
				v-for="option in enhancedThemeOptions" 
				:key="option.value"
				class="theme-option"
				:class="{ active: currentTheme === option.value }"
				@click="selectTheme(option.value)"
			>
				<!-- 主题图标 -->
				<view class="theme-icon">
					<uni-icons 
						:type="option.icon" 
						:size="20" 
						:color="currentTheme === option.value ? '#3B82F6' : '#6B7280'"
					/>
				</view>
				<!-- 主题名称 -->
				<text class="theme-label">{{ option.label }}</text>
				<!-- 选中状态指示 -->
				<view v-if="currentTheme === option.value" class="theme-check">
					<uni-icons type="checkmarkempty" size="16" color="#3B82F6" />
				</view>
			</view>
		</view>
		
		<!-- 主题预览区域 -->
		<view class="theme-preview" v-if="showPreview">
			<view class="preview-header">
				<text class="preview-title">预览效果</text>
			</view>
			<!-- 预览内容容器 -->
			<view class="preview-content" :data-theme="previewTheme">
				<view class="preview-card">
					<view class="preview-card-header">
						<text class="preview-card-title">示例卡片</text>
						<view class="preview-priority-tag priority-high">高优先级</view>
					</view>
					<text class="preview-card-content">这是一个示例日程卡片，用于展示主题效果</text>
					<view class="preview-card-footer">
						<text class="preview-card-time">14:30 - 15:30</text>
						<text class="preview-card-tag">工作</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
/**
 * 主题选择器组件
 * 提供浅色、深色、自动三种主题模式选择
 * 支持实时预览主题效果
 */
import { mapState, mapActions, mapGetters } from 'vuex'
import { getActualTheme, isSystemDarkModeSupported } from '@/utils/themeUtils.js'

export default {
	name: 'ThemeSelector',
	
	props: {
		/** 是否显示主题预览 */
		showPreview: {
			type: Boolean,
			default: true
		}
	},
	
	data() {
		return {
			/** 预览使用的主题 */
			previewTheme: 'light'
		}
	},
	
	computed: {
		...mapState('settings', ['display']),
		...mapGetters('settings', ['themeOptions']),
		
		/**
		 * 当前选中的主题
		 * @returns {string} 主题值
		 */
		currentTheme() {
			return this.display.theme
		},
		
		/**
		 * 增强的主题选项列表
		 * 包含图标和描述信息
		 * @returns {Array} 主题选项数组
		 */
		enhancedThemeOptions() {
			const options = [
				{ 
					value: 'light', 
					label: '浅色模式', 
					icon: 'sunny',
					description: '适合白天使用'
				},
				{ 
					value: 'dark', 
					label: '深色模式', 
					icon: 'moon',
					description: '适合夜间使用，保护视力'
				}
			]
			
			// 只有系统支持时才显示自动模式
			if (isSystemDarkModeSupported()) {
				options.push({
					value: 'auto', 
					label: '跟随系统', 
					icon: 'gear',
					description: '根据系统设置自动切换'
				})
			}
			
			return options
		}
	},
	
	watch: {
		/**
		 * 监听当前主题变化，更新预览
		 */
		currentTheme: {
			handler(newTheme) {
				this.updatePreview(newTheme)
			},
			immediate: true
		}
	},
	
	methods: {
		...mapActions('settings', ['updateDisplay']),
		
		/**
		 * 选择主题
		 * @param {string} theme - 主题值
		 */
		async selectTheme(theme) {
			try {
				// 更新设置
				await this.updateDisplay({ theme })
				
				// 更新预览
				this.updatePreview(theme)
				
				// 显示切换成功提示
				uni.showToast({
					title: `已切换到${this.getThemeLabel(theme)}`,
					icon: 'success',
					duration: 1500
				})
				
				// 触发主题变化事件
				this.$emit('themeChanged', theme)
				
			} catch (error) {
				console.error('切换主题失败:', error)
				uni.showToast({
					title: '切换失败',
					icon: 'error'
				})
			}
		},
		
		/**
		 * 更新主题预览
		 * @param {string} theme - 主题值
		 */
		updatePreview(theme) {
			this.previewTheme = getActualTheme(theme)
		},
		
		/**
		 * 获取主题显示标签
		 * @param {string} theme - 主题值
		 * @returns {string} 主题标签
		 */
		getThemeLabel(theme) {
			const option = this.enhancedThemeOptions.find(opt => opt.value === theme)
			return option ? option.label : theme
		}
	}
}
</script>

<style lang="scss" scoped>
/* ==================== 主题选择器容器 ==================== */
.theme-selector {
	width: 100%;
}

/* ==================== 主题选项列表 ==================== */
.theme-options {
	display: flex;
	flex-direction: column;
	gap: $spacing-sm;
}

.theme-option {
	display: flex;
	align-items: center;
	padding: $spacing-lg;
	background-color: var(--bg-secondary);
	border-radius: $border-radius-md;
	border: 2px solid transparent;
	cursor: pointer;
	transition: all 0.3s ease;
	
	&:active {
		transform: scale(0.98);
	}
	
	&.active {
		border-color: var(--primary-color);
		background-color: var(--primary-light);
	}
	
	&:hover {
		border-color: var(--border-color);
	}
}

/* 主题图标样式 */
.theme-icon {
	margin-right: $spacing-md;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: $border-radius-sm;
	background-color: var(--bg-primary);
}

/* 主题标签样式 */
.theme-label {
	flex: 1;
	font-size: $font-size-body;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
	transition: color 0.3s ease;
}

/* 选中状态指示 */
.theme-check {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==================== 主题预览区域 ==================== */
.theme-preview {
	margin-top: $spacing-xl;
	padding: $spacing-lg;
	background-color: var(--bg-secondary);
	border-radius: $border-radius-md;
	border: 1px solid var(--border-color);
}

.preview-header {
	margin-bottom: $spacing-lg;
}

.preview-title {
	font-size: $font-size-title-2;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
}

/* 预览内容容器 - 支持主题切换 */
.preview-content {
	transition: all 0.3s ease;
	
	&[data-theme="dark"] {
		--bg-primary: #{$dark-background};
		--bg-secondary: #{$dark-card};
		--text-primary: #{$dark-text-primary};
		--text-secondary: #{$dark-text-secondary};
		--border-color: #{$dark-border};
		--shadow-color: #{$dark-shadow};
	}
}

/* ==================== 预览卡片样式 ==================== */
.preview-card {
	background-color: var(--bg-secondary);
	border-radius: $border-radius-md;
	padding: $spacing-lg;
	box-shadow: 0 2px 4px 0 var(--shadow-color);
	border: 1px solid var(--border-color);
}

.preview-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: $spacing-md;
}

.preview-card-title {
	font-size: $font-size-title-2;
	font-weight: $font-weight-semibold;
	color: var(--text-primary);
}

.preview-priority-tag {
	padding: $spacing-xs $spacing-sm;
	border-radius: $border-radius-lg;
	font-size: $font-size-caption;
	font-weight: $font-weight-semibold;
	
	&.priority-high {
		background-color: var(--high-light);
		color: var(--high-color);
	}
}

.preview-card-content {
	font-size: $font-size-body;
	color: var(--text-secondary);
	line-height: $line-height-body;
	margin-bottom: $spacing-md;
}

.preview-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.preview-card-time {
	font-size: $font-size-caption;
	color: var(--text-secondary);
}

.preview-card-tag {
	padding: $spacing-xs $spacing-sm;
	background-color: var(--low-light);
	color: var(--low-color);
	border-radius: $border-radius-lg;
	font-size: $font-size-caption;
}
</style> 